<%@ page language="java" contentType="text/html; charset=utf-8"
		 pageEncoding="utf-8"%>
<%@page import="goods.Goods" %>
<%@ page import="goods.Cart" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>商品页面</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"/>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
	<script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
	<style>
		.container {
			margin-top: 20px;
			margin-bottom: 50px;
		}
		table {
			border-collapse: separate;
			border-spacing: 0;
			width: 100%;
		}
		th, td {
			text-align: center;
			padding: 12px 8px;
			border-bottom: 1px solid #e5e5e5;
		}
		th {
			background-color: #f8f8f8;
			font-weight: 400;
		}
		tbody tr:hover {
			background-color: #f5f5f5;
		}
		.text-end {
			text-align: right;
		}
		.taobao-title {
			font-size: 24px;
			font-weight: 700;
			margin-bottom: 20px;
			color: #ff6600;
		}
		#box1{
			font-size: 20px;
			font-weight: bold;
			color: #ff6600;
			text-shadow: #ff6600;
			text-align: center;

			margin-bottom: 10px;
		}
		#box2{
			position: absolute;
			/*bottom: 70px;*/
			/*margin-top: 10px;*/
			margin-top: 270px;
			margin-left: 50px;


		}
	/*	二维码*/
		#qrcode{
			width: 300px;
			height: 400px;
			display: none;
			margin: -225px auto;
			text-align: center;
			margin-top: 100px;
			box-shadow:7px 7px 3px gainsboro;
			border: 2px solid gainsboro;
		}
		.payBtn{
			position: relative;
			right:10px;
			float: right;
			top: 10px;
		}
	</style>
</head>
<body>
<div class="container">
	<div class="taobao-title">购物车</div>
	<table>
		<thead>
		<tr>
			<th>商品编码</th>
			<th>商品名称</th>
			<th>商品单价</th>
			<th>商品数量</th>
			<th>小计</th>
		</tr>
		</thead>
		<tbody>
		<%
			Cart cart = (Cart)session.getAttribute("cart");
			for (Goods goods : cart.getGoodsList()) {
		%>
		<tr>
			<td><%= goods.getId() %></td>
			<td><%= goods.getGoodsName() %></td>
			<td><%= goods.getPrice() %></td>
			<td><%= goods.getNum() %></td>
			<td><%= goods.getSubtotal() %></td>
		</tr>
		<%
			}
		%>
		<tr>
			<td colspan="4" class="text-end"><strong>总计:</strong></td>
			<td><%= cart.getTotal() %></td>
		</tr>
		</tbody>
	</table>
	<button type="button" class="payBtn btn btn-primary" onclick="handlePay()">支付</button>

	<div id="qrcode">
		<a>扫一扫付款(元)</a><br>
		<div id="box1">
			<%= cart.getTotal() %>
		</div>
		<div id="box2">
			<tr>
				<td><img src="1.png"></td>
				<td>请扫一扫继续支付</td>
			</tr>

		</div>
	</div>
</div>

<script>
	<%--扫码中文之后乱码解决函数--%>
	function toUtf8(str) {
		var out, i, len, c;
		out = "";
		len = str.length;
		for (i = 0; i < len; i++) {
			c = str.charCodeAt(i);
			if ((c >= 0x0001) && (c <= 0x007F)) {
				out += str.charAt(i);
			} else if (c > 0x07FF) {
				out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
				out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
				out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
			} else {
				out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
				out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
			}
		}
		return out;
	}
	let str=toUtf8("支付成功");
	$('#qrcode').qrcode({
		text: str,
	});

	function handlePay(){
		$("#qrcode").css("display","block");
		$(".payBtn").css("display","none");
		setTimeout(()=>{
			$("#qrcode").css("display","none");
			alert("支付成功");
		},7000)
	}
</script>
</body>
</html>
